<template>
        <Navbar/>
    <div class="content" >
        <div class="content-matter">
                    <!-- 左边的导航 -->
        <div class="content_left">
            <div class="content_left_top">
                <div class="content_left_top_xiala" @click="isShow = !isShow,Verticalbar=0" :class="Verticalbar===0?'Verticalbar':''"  @mouseenter="Verticalbar=0" @mouseleave="Verticalbar=-1">
                    <p > 联系室 </p>
                    <el-icon :style="{width:'12px'}" v-if="!isShow"> <ArrowRight /></el-icon>
                    <el-icon :style="{width:'12px'}" v-else> <ArrowDown /></el-icon>
                </div>
                    <div ><p class="content_left_top_yxiang"  v-if="isShow" @click="gotoNavigation">我的练习室</p></div>
            </div>
            <div class="content_left_button">
                <p :class="Verticalbar===1?'Verticalbar':''"  @click="leftRouteTo(1)">缓存</p>
                <p :class="Verticalbar===2?'Verticalbar':''"  @click="dialogVisible=true">音频库</p>
                <p :class="Verticalbar===3?'Verticalbar':''"  @click="leftRouteTo(3)">收藏</p>
                <p :class="Verticalbar===4?'Verticalbar':''"  @click="leftRouteTo(4)">历史</p>
            </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog v-model="dialogVisible" width="30%" draggable>
            <span>请打开中舞网APP ,    点击"练习室"-"音频库"中查看。</span>
            <template #footer>
            <span class="dialog-footer">
                <el-button  @click="dialogVisible = false" color="#f93684">确定</el-button>
            </span>
            </template>
        </el-dialog>
        <!-- 二级路由 -->
        <router-view></router-view>
        </div>
    </div>
     <Button />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Studio",
    
});
</script>

<script setup lang="ts">
import {ref} from "vue"
import { ArrowRight,ArrowDown } from '@element-plus/icons-vue'
//拿到路由器对象
import { useRouter } from "vue-router";
const isShow =ref(false)
const router = useRouter()
const dialogVisible = ref(false)
let  Verticalbar = ref(0)
//1.左边侧边栏路由跳转导航
const leftRouteTo =(num:number)=>{
    Verticalbar.value=num
    //然后路由跳转
    router.replace({
        path:"/studio/navigation",
        query:{
            num
        }
    })
    
}
//2.点击练习室 导航去练习室路由
const gotoNavigation=()=>{
        //然后路由跳转
        Verticalbar.value=0
        router.push("/studio/studioss")
}
//3.点击出来弹窗
const Dialogs=()=>{

}
</script>

<style lang="scss">
    .content{
        margin-top: 10px;
        .content-matter{
            width: 1200px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            .content_left{
                width: 170px;
                .content_left_top{
                    font-size: 14px;
                    margin-bottom: 5px;
                    background-color: #ffffff;
                    .content_left_top_xiala{
                        padding: 22px 25px;
                        font-size: 14px;
                        display: flex;
                        justify-content: space-between;
                    }
                    .content_left_top_yxiang{
                        padding: 17px 21px;
                        font-size: 14px;
                        color: #f93684;
                        padding-left: 50px;
                    }
                }
                .content_left_button{
                    width: 170px;
                    background-color: #ffffff;
                }
                .content_left_button p{
                    margin: 8px  0;
                    font-size: 14px;
                    padding: 17px 21px;
                }

            }

        }
    }
     .hearder-publish {
            margin-left: 600px;
            width: 75px;
            height: 30px;
            box-sizing: border-box;
            background-color: #f93684;
            color: white;
            border-radius: 20px;
            float: right;
            text-align: center;
            line-height: 30px;
            margin: 15px 0;
            margin-right: 28px;
            margin-top: 15px;
          }
          .ArrowRight{
            width: 12px;
            height: 12px;
          }
          .Verticalbar{
            border-left: 5px #f93684 solid;
          }
</style>